<template>
  <a-modal :zIndex="1001" :title="title" :visible="currentVisible" width="500px" @ok="handleSubmit" @cancel="currentVisible = false">
    <a-form-model ref="rulesForm" :model="form" :rules="rules">
      <a-form-model-item :label="label" prop="why">
        <a-checkbox-group v-model="form.why">
          <a-checkbox v-for="item in whyList" :value="item" :key="item.id">{{ item.whyName }}</a-checkbox>
        </a-checkbox-group>
      </a-form-model-item>
      <a-form-model-item label="备注">
        <a-textarea v-model="form.note" :rows="4" :maxLength="60" placeholder="其他原因请备注，最多输入60字" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      form: {
        why: [],
        note: ''
      },
      rules: {
        why: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    }
  },
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    whyList: {
      type: [Object, Array],
      default: () => {}
    },
    title: {
      type: String,
      default: '禁用内容/评论'
    },
    label: {
      type: String,
      default: '选择禁用原因（多选）'
    }
  },
  computed: {
    currentVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  filters: {},
  created() {
  },
  methods: {
    // 
    handleSubmit() {
      this.$refs.rulesForm.validate(valid => {
        if (valid) {
          this.currentVisible = false
          this.$emit('onOk', this.form)
          this.form = {}
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-checkbox-wrapper {
  margin-left: 0;
  margin-right: 8px;
}
</style>
